<!--
 * @Descripttion: 企业评价
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-28 11:19:48
 * @LastEditors: younghxp
 * @LastEditTime: 2022-02-16 11:13:00
-->
<template>
  <div class="container" ref="mainCon">
    <el-row
      class="toolbar searchInputWidth"
      style="padding-bottom: 0; padding-top: 24px !important"
    >
      <el-form :inline="true" :model="filterField" ref="searchConditions">
        <el-col :lg="8" :xl="6">
          <el-form-item
            label="是否共享"
            class="row-padding-bottom"
            label-width="80px"
          >
            <el-select
              v-model="filterField.associatedStatus"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in isSharedOption"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="6">
          <el-form-item
            label="单位角色"
            class="row-padding-bottom"
            label-width="80px"
          >
            <el-select
              v-model="filterField.type"
              filterable
              placeholder="请选择"
              clearable
              @change="changeType"
            >
              <el-option
                v-for="(item, index) in scoreDimTypeArr"
                :key="index"
                :label="item.scoreDimTypeDesc"
                :value="item.scoreDimType"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="advanced">
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="信用等级"
              class="row-padding-bottom"
              label-width="80px"
            >
              <el-select
                v-model="filterField.gradeLevel"
                filterable
                placeholder="请选择"
                :no-data-text="'请先选择单位角色'"
                clearable
              >
                <el-option
                  v-for="(item, index) in selectLevel"
                  :key="index"
                  :label="item.name"
                  :value="item.gradeLevel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="企业名称"
              label-width="80px"
              class="row-padding-bottom"
            >
              <el-input
                type="text"
                placeholder="请输入企业名称"
                v-model="filterField.keyword"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-form-item
          label="项目名称"
          label-width="80px"
          class="row-padding-bottom"
        >
          <el-input
            type="text"
            placeholder="请输入项目名称"
            v-model="filterField.projectName"
            clearable
          ></el-input>
        </el-form-item> -->
          <!-- 单位类型置灰不能选择为需求如此 -->
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="单位类型"
              class="row-padding-bottom"
              label-width="80px"
            >
              <el-select
                v-model="filterField.departmentType"
                placeholder="请选择"
                clearable
                disabled
              >
                <el-option label="企业" value="0"></el-option>
                <el-option label="事业单位" value="5"></el-option>
                <el-option label="个体工商户" value="15"></el-option>
                <el-option label="其他" value="10"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <el-form-item>
          <!-- <el-button
          type="primary"
          icon="icon iconfont iconchazhao1"
          @click="searchList"
          class="commonBtn"
        ></el-button> -->
          <a
            @click="toggleAdvanced"
            style="margin-left: 25px; color: #409eff; cursor: pointer"
            class="btnColor"
          >
            {{ advanced ? '收起' : '展开' }}
            <i
              :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
          </a>
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchList"
            class="searchBtn"
          >
            <span>搜索</span>
          </el-button>
        </el-form-item>
        <!-- <el-form-item>
        <el-button @click="openSharing" class="commonBtn saveBtn funComBut"
          ><span class="opetareText">开启共享</span></el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button @click="closeSharing" class="commonBtn saveBtn funComBut"
          ><span class="opetareText">关闭共享</span></el-button
        >
      </el-form-item> -->

        <!-- <template>
            <el-form-item>
                <el-button @click="openSharing" class="commonBtn saveBtn funComBut">
                  开启共享
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="closeSharing" class="commonBtn saveBtn funComBut">
                   关闭共享
                </el-button>
            </el-form-item>
        </template> -->
        <!-- <template v-if="isHsUser()">
            <el-form-item>
                <el-button @click="closeSharing('isPublic')" class="commonBtn saveBtn funComBut">
                    <span class="opetareText">开启公示</span>
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="openSharing('isPublic')" class="commonBtn saveBtn funComBut">
                    <span class="opetareText">关闭公示</span>
                </el-button>
            </el-form-item>
        </template> -->
      </el-form>
    </el-row>
    <div class="spacing"></div>
    <div
      ref="tableBox"
      :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
    >
      <div style="margin-bottom: 24px">
        <el-button @click="openSharing" class="commonBut saveBtn funComBut">
          <span class="opetareText">开启共享</span>
        </el-button>
        <el-button
          @click="closeSharing"
          class="commonBut saveBtn funComBut closeBtn"
        >
          <span class="opetareText">关闭共享</span>
        </el-button>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        @selection-change="handleSelectionChange"
        ref="tableBox1"
        :max-height="tableHeight"
        @sort-change="sortChange"
      >
        <el-table-column
          type="selection"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="associatedStatus"
          label="共享状态"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.associatedStatus == 1" style="color: red"
              >未共享</span
            >
            <span v-if="scope.row.associatedStatus == 0" style="color: green"
              >已共享</span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
        prop="associatedStatus"
        label="公示状态"
        align="center"
        min-width="18%"
        v-if="isHsUser()"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.isPublic === 1" style="color: red">未公示</span>
          <span v-if="scope.row.isPublic === 0 || scope.row.isPublic === null" style="color: green">已公示</span>
        </template>
      </el-table-column> -->
        <!-- <el-table-column
          prop="associatedStatus"
          label="共享状态"
          align="center"
          min-width="24%"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.associatedStatus == 1" style="color: red"
              >未共享</span
            >
            <span v-if="scope.row.associatedStatus == 0" style="color: green"
              >已共享</span
            >
          </template>
        </el-table-column> -->
        <el-table-column
          prop="companyName"
          label="单位名称"
          align="left"
          width="230"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.companyName"
              :columnName="'companyName'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="typeDesc"
          label="单位角色"
          align="center"
          :formatter="formatTd"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="uscc"
          label="统一社会信用代码"
          align="center"
          :formatter="formatTd"
          width="230"
        ></el-table-column>
        <el-table-column
          prop="projectCount"
          label="参评项目个数"
          align="center"
          :formatter="formatTd"
          sortable="custom"
          width="140"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="scope.row.projectCount && isShowDetail"
              @click="toProjectList(scope.row)"
              >{{ scope.row.projectCount }}</el-link
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="score"
          sortable="custom"
          label="动态信用分数"
          align="center"
          :formatter="formatTd"
          min-width="140"
        ></el-table-column>
        <el-table-column
          label="动态信用等级"
          align="center"
          :formatter="formatTd"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.gradeLevel === 'O' ? '其他' : scope.row.gradeLevel }}
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无企业评级相关数据"></emptyTable>
        </div>
      </el-table>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'qyEvaluation',
  components: {},
  computed: {
    ...mapState(['investmentOptions', 'areasOptions', 'industryOptions']),
  },
  data() {
    return {
      advanced: false,
      scoreDimTypeArr: [
        {
          scoreDimType: '0',
          scoreDimTypeDesc: '建设单位',
        },
        {
          scoreDimType: '5',
          scoreDimTypeDesc: '施工单位',
        },
        {
          scoreDimType: '10',
          scoreDimTypeDesc: '分包单位',
        },
      ],
      loginType: '',
      selectLevel: [],
      isSharedOption: [
        {
          name: '已共享',
          id: 0,
        },
        {
          name: '未共享',
          id: 1,
        },
      ],
      //表格数据
      tableList: [],
      requestUrl: '/api-ps/creditCompanyScore/expand/getCompanyScoreListByNDRC',
      //搜索条件
      filterField: {
        keyword: '',
        gradeLevel: '',
        associatedStatus: '',
        type: '',
        projectName: '',
      },
      isShow: false, //列表加载
      loading: false,
      isShowDetail: '',
      tableDateSelcted: '',
      advanced: false,
      hiddleToolBar: false,
      tableHeight: null,
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('scoreList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('scoreListSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('scoreListJSF:detail') > -1
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }
      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * @description: 开启共享/关闭公示
     */
    openSharing(type) {
      if (this.tableDateSelcted.length > 0) {
        let url = '/api-ps/creditassociated/addbatch'
        let arrListTwo = []
        this.tableDateSelcted.forEach((item, i) => {
          let obj = {}
          obj.id = item.associatedId
          obj.type = item.associatedType
          obj.projectId = ''
          obj.status = 0
          obj.uscc = item.uscc
          obj.companyType = item.type
          obj.companyName = item.companyName
          if (type === 'isPublic') {
            Object.assign(obj, {
              isPublic: 1,
            })
          }
          arrListTwo.push(obj)
        })
        type === 'isPublic' && (url = 'api-ps/creditassociated/removePublic')
        this.axios({
          method: 'post',
          url,
          data: {
            associateds: JSON.stringify(arrListTwo),
          },
        })
          .then((response) => {
            if (!response.data.hasError) {
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
              this.$message({
                message: type === 'isPublic' ? '关闭成功' : '开启成功',
                type: 'success',
              })
            } else {
              this.$message({
                message: type === 'isPublic' ? '关闭失败' : '开启失败',
                type: 'error',
              })
            }
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: type === 'isPublic' ? '关闭失败' : '开启失败',
              type: 'error',
            })
          })
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: '请选择数据',
          type: 'warning',
        })
      }
    },
    /**
     * @description: 关闭共享/开启公示
     */
    closeSharing(type) {
      if (this.tableDateSelcted.length > 0) {
        let arrListTwo = []
        this.tableDateSelcted.forEach((item, i) => {
          arrListTwo.push(item.associatedId)
        })
        let url = '/api-ps/creditassociated/remove'
        type === 'isPublic' && (url = 'api-ps/creditassociated/addPublic')
        this.axios({
          method: 'post',
          url,
          data: {
            ids: JSON.stringify(arrListTwo),
          },
        })
          .then((response) => {
            if (!response.data.hasError) {
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
              this.$message({
                message: type === 'isPublic' ? '开启成功' : '关闭成功',
                type: 'success',
              })
            } else {
              this.$message({
                message: type === 'isPublic' ? '开启失败' : '关闭失败',
                type: 'error',
              })
            }
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: type === 'isPublic' ? '开启失败' : '关闭失败',
              type: 'error',
            })
          })
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: '请选择数据',
          type: 'warning',
        })
      }
    },
    handleSelectionChange(val) {
      this.tableDateSelcted = val
    },
    // 选择角色
    changeType(val) {
      this.filterField.gradeLevel = ''
      if (val) {
        this.getLevelList(this.filterField.type)
      } else {
        this.selectLevel = []
        // this.$message({
        //     type: "error",
        //     message: "请先选择单位角色！",
        // });
      }
    },
    // 获取评级配置
    getLevelList(type) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditLevel/expand/getCreditLevelList',
        data: {
          type,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            results.forEach((v) => {
              v.name = v.gradeLevel
            })
            this.selectLevel = results
            const otherLevel = { gradeLevel: 'O', name: '其他' }
            this.selectLevel.push(otherLevel)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    // 企业端企业列表
    getCompanyList(type) {
      return this.axios({
        method: 'post',
        url: '/api-ps/creditCompanyScore/expand/getCompanyScoreByCompany',
        data: {
          type,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            this.tableList = results
            if (this.tableList.length < 1) {
              this.isShow = true
            }
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    toProjectList(row) {
      this.$router.push({
        path: '/home/enterpriseScore/scoreProjectList',
        name: 'scoreProjectList',
        query: {
          uscc: row.uscc,
          type: row.type,
          page: 'dataSharingSettings',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/networkGrid/dataSharingSettings',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 220

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  // padding: 24px;
  .closeBtn {
    background-color: #3e5265 !important;
    border-color: #3e5265 !important;
  }
}
@import '../../../static/css/filterArea.less';
</style>
